<template>
	<div class="crime_wrapper">
		<idenheader leftTitle="社会不良" rightData="数据来自中国公安部"></idenheader>
		<div v-if="crime.personBadInfo.caseTime">
			<div v-show="crime.personBadInfo.caseTime.length" class="shenfen_pass">有社会不良记录(<span>{{crime.personBadInfo.caseTime.length}}</span>条）</span></div>
		</div>
		<div v-show="!crime.personBadInfo.caseTime.length" class="shenfen_nopass">无社会不良记录</span></div>
		<div class="shenfen_info" v-if="crime.personBadInfo.resultData">
			<ul class="m-list" v-for="item in crime.personBadInfo.resultData">
                <li>
                    <label>{{item.result}}</label>
                    <span>{{item.remark}}</span>
                </li>
            </ul>
		</div>
	</div>
</template>

<script>
	import idenheader from '../common/idenheader';
	export default {
		data(){
			return{
				listHeight: [],
        		scrollY: 0,
			}
		},
		components:{
			idenheader
		},
		props:['crime']
	}
</script>

<style scoped>
	.crime_wrapper{
		border: 1px solid #EDEDED;
	    border-radius: 2px 2px 3px 3px;
	}
	.shenfen_pass{
		padding: 0 17px;
		height: 36px;
		line-height: 36px;
	    color: #ff4949;
	    color: #ff4949;
	    border-bottom: 1px solid #EDEDED;
	}
	.shenfen_nopass{
		padding: 0 17px;
		height: 36px;
		line-height: 36px;
        color: rgb(84,195,0);
        border-bottom: 1px solid #EDEDED;
	}
	.shenfen_info{
		padding: 0 17px;
	}
	.m-list{
		padding-top: 10px;
	}
	.m-list li{
		list-style: none;
		margin-bottom:10px;
		font-size: 1.2rem;
	}
	.m-list li label{
		text-align: justify;
    	color: #9b9b9b;
    }
    .m-list li span{
	    color: #212121;
	    margin-left: 16px;
    }
</style>